<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-input
        placeholder="请输入内容"
        v-model="usersInfo.query"
        @clear="getUsers" @change="getUsers"
        clearable
        class="input-with-select"
      >
        <el-button @click="getUsers" slot="append" icon="el-icon-search"></el-button>
      </el-input>
         <el-button type="primary">添加用户</el-button>
           <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%"
    border>
    <el-table-column
      type="index"
      width="50"
      align="center">
    </el-table-column>
    <el-table-column
      property="username"
      label="名字"
      align="center">
    </el-table-column>
    <el-table-column
      property="email"
      label="邮箱"
      align="center">
    </el-table-column>
    <el-table-column
      property="mobile"
      label="电话"
      align="center">
    </el-table-column>
      <el-table-column
      property="role_name"
      label="角色"
      align="center">
    </el-table-column>
      <el-table-column
      label="状态"
      align="center"
     >
     <template slot-scope="scope">
      <el-switch
      @change="getState(scope.row)"
      v-model="scope.row.mg_state"
  active-color="#409eff"
  inactive-color="#dcdfe6"
 >
</el-switch>
     </template>
    </el-table-column>
      <el-table-column
      property="address"
      label="操作"
      align="center"
      width="200"
      >
      <el-button  type="primary" size="mini" icon="el-icon-edit"></el-button>
      <el-button  type="danger" size="mini" icon="el-icon-delete"></el-button>
      <el-button  type="warning" size="mini" icon="el-icon-setting"></el-button>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="usersInfo.pagenum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="usersInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </el-card>
  </div>
</template>

<script>
import {getUsers,getState} from '../../api/user'
export default {
  data() {
    return {
      total:0,
         value: true,
          tableData: [],
          usersInfo:{
            query:"",
            pagenum:1,
            pagesize:2
        },
    };
  },
     methods: {
         handleSizeChange(val) {
      this.usersInfo.pagesize=val
      this.getUsers()
      },
      handleCurrentChange(val) {
       this.usersInfo.pagenum=val
       this.getUsers()
      },
      // setCurrent(row) {
      //   this.$refs.singleTable.setCurrentRow(row);
      // },
      // handleCurrentChange(val) {
      //   this.currentRow = val;
      //  },
        getUsers(){
        getUsers(this.usersInfo).then(res =>{
          //  console.log(res);
           if(res.status==200){
               this.tableData=res.data.data.users
               this.total=res.data.data.total
           }
        })
        // .then(error =>{
        //   console.log("error");
        // }) 
     },
     getState(user){
     console.log(user);

       getState(user).then(res=>{
        //  if (res.data.meta.status !=200) {
        //     user.
        //  }
         console.log(123);
         console.log(res);
       })
     },
    },
    mounted(){
        this.getUsers()
    }
  
};
</script>

<style>
.el-breadcrumb {
  margin-bottom: 15px;
}
.el-input{
    width: 350px;
    margin-right: 25px;
    margin-bottom: 15px;
}
.block{
  margin-top: 15px;
}
</style>
